<template>
  <div>
    <!-- 消息侧边栏 -->
    <div v-if="show" class="notification-sidebar">
      <h3 class="sidebar-title">Notifications</h3>

      <!-- Tab切换 -->
      <div class="tab-container">
        <div
          class="tab-item"
          :class="{ active: activeTab === 'interactions' }"
          @click="switchTab('interactions')">
          <div class="tab-count" v-if="props.InteractionsCount">{{ props.InteractionsCount }}</div>
          <span class="text-[15px] hover:text-[#222]">Interactions</span>
        </div>
        <div
          class="tab-item"
          :class="{ active: activeTab === 'official' }"
          @click="switchTab('official')">
          <div class="tab-count" v-if="props.OfficialCount">{{ props.OfficialCount }}</div>
          <span class="text-[15px] hover:text-[#222]">Official Notification</span>
        </div>

        <div
          @click="readAll"
          class="absolute right-0 top-0 cursor-pointer text-[#222] text-[16px] font-bold border-b-2 border-[#E1E2E3]">
          Read all​​
        </div>
      </div>

      <!-- 分割线 -->
      <div class="my-[16px] px-[8px]">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="512"
          height="2"
          viewBox="0 0 512 2"
          fill="none">
          <path d="M0 1L512 1" stroke="#E1E2E3" />
        </svg>
      </div>

      <div class="sidebar-content" @scroll="onScroll">
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <span>Loading...</span>
        </div>

        <!-- Interactions Tab Content -->
        <div v-else-if="activeTab === 'interactions'">
          <div v-if="interactionNotifications.length === 0 && !loading" class="empty-state">
            <no-data title="No notifications" />
          </div>
          <div v-else class="notification-list">
            <div
              v-for="(notification, index) in interactionNotifications"
              :key="index"
              class="box-item"
              @click="markAsRead(notification)">
              <div class="notification-avatar">
                <img
                  :src="notification?.user?.avatar"
                  class="rounded-full w-[40px] h-[40px]"
                  @click.stop="viewUser(notification?.user)"
                  :alt="notification?.user?.name" />
                <!-- 消息 -->
                <div
                  v-if="notification.notification_type == 2"
                  class="absolute bottom-[-1px] right-[-1px] w-[22px] h-[22px] flex items-center justify-center rounded-full p-[1px] border border-[#fff] bg-[#1890FF]">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="10"
                    height="10"
                    viewBox="0 0 10 10"
                    fill="none">
                    <path
                      d="M8.16965 1.1125C7.26891 0.391811 6.14956 -0.000569332 4.99599 6.20037e-07C3.63618 6.20037e-07 2.36609 0.523885 1.41654 1.47522C0.498907 2.39576 -0.00399396 3.61116 2.38899e-05 4.89665C5.51298e-05 5.83913 0.276746 6.76087 0.795781 7.54754L0.800022 7.55357C0.806272 7.56272 0.812745 7.57188 0.819218 7.5808C0.825691 7.58973 0.833727 7.60134 0.835513 7.60424L0.840424 7.61317C0.865647 7.65781 0.885066 7.71228 0.867879 7.76719L0.456719 9.25513C0.44027 9.31046 0.431263 9.36774 0.429933 9.42545C0.429636 9.57726 0.489553 9.723 0.596547 9.8307C0.70354 9.93841 0.848877 9.99929 1.00069 10C1.08091 9.99735 1.15997 9.98003 1.23395 9.94888L2.74042 9.40513L2.75939 9.39777C2.80037 9.38056 2.84441 9.37183 2.88886 9.3721C2.92984 9.3722 2.97045 9.37976 3.00872 9.39442C3.04488 9.40848 3.37323 9.53415 3.71966 9.63103C4.0076 9.71138 4.60671 9.83192 5.07613 9.83192C6.4076 9.83192 7.6509 9.31629 8.57679 8.37969C9.49464 7.45022 10 6.21473 10 4.89933C10.0001 4.56168 9.96435 4.22496 9.8933 3.89487C9.6625 2.8096 9.05045 1.82121 8.16965 1.1125ZM2.85716 5.71429C2.71589 5.71429 2.57779 5.67239 2.46032 5.59391C2.34286 5.51542 2.25131 5.40386 2.19725 5.27335C2.14318 5.14283 2.12904 4.99921 2.1566 4.86065C2.18416 4.72209 2.25219 4.59482 2.35208 4.49492C2.45198 4.39503 2.57925 4.327 2.71781 4.29944C2.85637 4.27188 2.99999 4.28602 3.1305 4.34009C3.26102 4.39415 3.37258 4.4857 3.45107 4.60316C3.52955 4.72063 3.57144 4.85873 3.57144 5C3.57144 5.18944 3.49619 5.37112 3.36223 5.50508C3.22828 5.63903 3.0466 5.71429 2.85716 5.71429ZM5.00001 5.71429C4.85874 5.71429 4.72064 5.67239 4.60318 5.59391C4.48571 5.51542 4.39416 5.40386 4.3401 5.27335C4.28604 5.14283 4.27189 4.99921 4.29945 4.86065C4.32701 4.72209 4.39504 4.59482 4.49494 4.49492C4.59483 4.39503 4.7221 4.327 4.86066 4.29944C4.99922 4.27188 5.14284 4.28602 5.27336 4.34009C5.40387 4.39415 5.51543 4.4857 5.59392 4.60316C5.6724 4.72063 5.7143 4.85873 5.7143 5C5.7143 5.18944 5.63904 5.37112 5.50509 5.50508C5.37113 5.63903 5.18945 5.71429 5.00001 5.71429ZM7.14286 5.71429C7.00159 5.71429 6.86349 5.67239 6.74603 5.59391C6.62856 5.51542 6.53701 5.40386 6.48295 5.27335C6.42889 5.14283 6.41474 4.99921 6.4423 4.86065C6.46986 4.72209 6.53789 4.59482 6.63779 4.49492C6.73768 4.39503 6.86496 4.327 7.00351 4.29944C7.14207 4.27188 7.28569 4.28602 7.41621 4.34009C7.54673 4.39415 7.65828 4.4857 7.73677 4.60316C7.81526 4.72063 7.85715 4.85873 7.85715 5C7.85715 5.18944 7.78189 5.37112 7.64794 5.50508C7.51398 5.63903 7.3323 5.71429 7.14286 5.71429Z"
                      fill="white" />
                  </svg>
                </div>
                <!-- 点赞 -->
                <div
                  v-if="notification.notification_type == 1"
                  class="absolute bottom-0 right-0 rounded-full p-[1px] w-[22px] h-[22px] flex items-center justify-center border border-[#fff] bg-[#FF4D4F]">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="10"
                    height="9"
                    viewBox="0 0 10 9"
                    fill="none">
                    <path
                      d="M5 9C4.84561 8.99981 4.69485 8.95432 4.56733 8.86945C2.67825 7.61906 1.86026 6.76172 1.40909 6.2257C0.447599 5.08313 -0.0127132 3.91008 0.000266913 2.63977C0.0154103 1.18406 1.21318 0 2.67032 0C3.72988 0 4.46373 0.581953 4.89111 1.06664C4.90465 1.08184 4.92138 1.09403 4.94016 1.10238C4.95895 1.11073 4.97935 1.11505 5 1.11505C5.02065 1.11505 5.04105 1.11073 5.05984 1.10238C5.07862 1.09403 5.09535 1.08184 5.10889 1.06664C5.53627 0.581484 6.27013 0 7.32968 0C8.78682 0 9.98459 1.18406 9.99973 2.64C10.0127 3.91055 9.55192 5.08359 8.59092 6.22594C8.13974 6.76195 7.32175 7.6193 5.43267 8.86969C5.30512 8.95447 5.15437 8.99988 5 9Z"
                      fill="white" />
                  </svg>
                </div>
              </div>
              <div class="notification-content flex justify-between items-center">
                <div class="flex flex-col align-center">
                  <div class="notification-header">
                    <span class="text-[#222] text-[16px] font-bold">
                      {{ notification?.user?.name }}
                    </span>
                    <div
                      v-if="notification?.user?.follow_flag"
                      class="text-[#7A7A7A] ml-[4px] text-[12px] rounded-[4px] px-[4px] py-[2px] bg-[#EDEDED]">
                      Following​
                    </div>

                    <div
                      v-show="!notification.is_read"
                      class="bg-[#f76b1b] w-[8px] h-[8px] ml-[4px] rounded-full"></div>
                  </div>
                  <div class="text-[#404040] text-[16px]">
                    {{ notification.content }}
                  </div>
                  <div class="gap-[16px] text-[#7A7A7A] text-[14px] flex">
                    <span v-if="notification.notification_type == 2">Commented on your post​</span>
                    <span v-else-if="notification.notification_type == 3">Followed you​</span>
                    <span v-else-if="notification.notification_type == 1">​​Liked your post​</span>
                    <span>
                      {{ formatTime(notification.created_at || new Date().toISOString()) }}
                    </span>
                  </div>
                </div>
                <div>
                  <div v-if="notification.notification_type == 3">
                    <button
                      v-if="notification?.user?.follow_flag == 2"
                      class="bg-[#EDEDED] text-[14px] text-[#222] rounded-[8px] px-[36px] py-[10px]"
                      @click.stop="followUser(notification?.user?.uid, 0, notification)">
                      Friends
                    </button>
                    <div
                      v-else-if="notification?.user?.follow_flag == 1"
                      @click.stop="followUser(notification?.user?.uid, 1, notification)"
                      class="bg-[#F76B1B] text-[14px] text-[#fff] rounded-[8px] px-[36px] py-[10px]">
                      Following
                    </div>
                    <div
                      v-else-if="notification?.user?.follow_flag == 0"
                      @click.stop="followUser(notification?.user?.uid, 1, notification)"
                      class="bg-[#F76B1B] text-[14px] text-[#fff] rounded-[8px] px-[36px] py-[10px]">
                      Follow
                    </div>
                  </div>
                  <img
                    v-else
                    :src="notification?.feed?.thumbnail?.url"
                    class="w-[56px] h-[56px] rounded-[4px] object-cover"
                    alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Official Notification Tab Content -->
        <div v-else-if="activeTab === 'official'">
          <div v-if="officialNotifications.length === 0 && !loading" class="empty-state">
            <no-data title="No notifications" />
          </div>
          <div v-else class="notification-list">
            <div
              v-for="notification in officialNotifications"
              :key="notification.id"
              class="box-item"
              @click="markAsRead(notification)">
              <div
                class="w-[40px] h-[40px] bg-[#F76B1B] rounded-full flex items-center justify-center">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="23"
                  height="20"
                  viewBox="0 0 23 20"
                  fill="none">
                  <path
                    d="M18.1741 19.1641H13.6869L9.95545 11.1241L6.45289 19.1641H1.8145L0.229492 15.7963L8.23656 0.164062H11.588L16.8569 12.0918L20.0226 6.69918L22.2295 11.4481L18.1741 19.1641Z"
                    fill="white" />
                </svg>
              </div>
              <div class="notification-content">
                <div class="notification-header">
                  <span class="text-[#222] text-[16px] font-bold">
                    {{ notification?.title }}
                  </span>
                  <div
                    v-if="!notification.is_read"
                    class="bg-[#f76b1b] w-[8px] h-[8px] ml-[4px] rounded-full"></div>
                </div>

                <div class="text-[#404040] text-[16px]">
                  {{ notification.content }}
                </div>
                <div class="gap-[16px] text-[#7A7A7A] text-[14px] flex">
                  {{ formatTime(notification.created_at || new Date().toISOString()) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 侧边栏遮罩 -->
    <div v-if="show" class="sidebar-overlay" @click="closeSidebar"></div>

    <!-- 公告弹窗 -->
    <div v-if="showAnnouncement" class="modal-overlay" @click="showAnnouncement = false">
      <div class="bg-[#fff] rounded-[8px] p-[24px] w-[560px] min-h-[200px]" @click.stop>
        <div class="font-[500] text-[20px] border-b border-[#E1E2E3] pb-[16px]">
          Official Notification
        </div>
        <div class="mt-[16px]">
          <div class="font-[500] text-[16px]">{{ notificationItem.title }}</div>
          <div class="text-[#7A7A7A] text-[14px]">
            {{ formatTime(notificationItem.created_at || new Date().toISOString()) }}
          </div>
          <div class="text-[#404040] text-[16px]">
            {{ notificationItem.content }}
          </div>
        </div>
        <div class="w-full flex mt-[16px]">
          <div
            style="
              background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
              backdrop-filter: blur(2px);
            "
            class="rounded-[8px] ml-[auto] px-[36px] py-[10px] cursor-pointer text-[#fff] text-[14px] font-[500]"
            @click="handleLooking">
            Confirm
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, watch } from 'vue';
  import { UserAPI } from '@/api/user';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import noData from '@/components/NoData.vue';

  // Interactions数据接口
  export interface InteractionNotification {
    msg_id: number;
    feed?: {
      user?: {
        name: string;
        avatar: string;
      };
    };
    content?: string;
    created_at?: string;
    is_read?: number;
  }

  // Official Notification数据接口
  export interface OfficialNotification {
    id: number;
    title: string;
    content: string;
    type: string;
    created_at: string;
    is_read: number;
    priority?: 'high' | 'medium' | 'low';
  }

  // Props
  const props = defineProps<{
    show: boolean;
    InteractionsCount: number;
    OfficialCount: number;
  }>();

  // Emits
  const emit = defineEmits<{
    close: [];
  }>();

  const router = useRouter();

  // 响应式数据
  const loading = ref(false);
  const dataLoading = ref(false);
  const activeTab = ref<'interactions' | 'official'>('interactions');

  const showAnnouncement = ref(false);

  // 分别管理两种类型的数据
  const interactionNotifications = ref<any[]>([]);
  const officialNotifications = ref<any[]>([]);
  // --- 分页相关状态 ---
  const interactionStart = ref(0);
  const interactionHasMore = ref(true);
  const officialStart = ref(0);
  const officialHasMore = ref(true);
  const PAGE_SIZE = 12;

  // 计算未读消息数量
  const unreadCount = computed(() => {
    const interactionUnread = interactionNotifications.value.filter((n) => n.is_read !== 1).length;
    const officialUnread = officialNotifications.value.filter((n) => n.is_read !== 1).length;
    return interactionUnread + officialUnread;
  });

  const handleLooking = async () => {
    try {
      // 调用设置消息已读接口
      if (notificationItem.value && notificationItem.value.msg_id) {
        // await UserAPI.setMsgRead({ msg_id: notificationItem.value.msg_id });
        // 更新本地状态，将消息标记为已读
        const notification = officialNotifications.value.find(
          (n) => n.id === notificationItem.value.msg_id
        );
        if (notification) {
          notification.is_read = 1; // 1表示已读
        }
      }
    } catch (error) {
      console.error('标记消息已读失败:', error);
    } finally {
      // 关闭弹窗
      showAnnouncement.value = false;
    }
  };

  const followUser = async (userId: number, type: number, notification: any) => {
    if (type == 1) {
      await UserAPI.followUser({ to_id: userId });
    } else {
      await UserAPI.unfollowUser({ to_id: userId });
    }
    notification.user.follow_flag = type;
  };

  // 方法
  const closeSidebar = () => {
    emit('close');
  };

  const switchTab = (tab: 'interactions' | 'official') => {
    activeTab.value = tab;
    interactionNotifications.value = [];
    officialNotifications.value = [];
    interactionStart.value = 0;
    officialStart.value = 0;
    // 切换tab时加载对应数据
    loadNotifications();
  };

  // 阅读全部
  const readAll = async () => {
    try {
      await UserAPI.setMsgRead({ notification_type: 0 });
      ElMessage({
        message: 'Operation successful',
        type: 'success',
      });
      interactionNotifications.value.forEach((element) => {
        element.is_read = 1;
      });
    } catch (error) {}
  };

  const loadNotifications = async (needLoading = true) => {
    dataLoading.value = true;
    if (needLoading) {
      loading.value = true;
    }
    try {
      if (activeTab.value === 'interactions') {
        // 加载互动消息
        const response: any = await UserAPI.getNotifications({
          notification_type: 0,
          start: interactionStart.value,
          size: PAGE_SIZE,
        });
        console.log('互动消息数据:', response);

        if (response.code == 200) {
          interactionNotifications.value = [
            ...interactionNotifications.value,
            ...response.data.notifications,
          ];
          interactionStart.value = response.data.next_start;
          interactionHasMore.value = response.data.has_more;
        }
      } else if (activeTab.value === 'official') {
        // 加载系统消息
        const response = await UserAPI.getSystemMessages({
          start: officialStart.value,
          size: PAGE_SIZE,
        });
        console.log('系统消息数据:', response);

        if (response.code == 200) {
          officialNotifications.value = [...officialNotifications.value, ...response.data];
          officialStart.value = response.data.next_start;
          officialHasMore.value = response.data.has_more;
        }
      }
    } catch (error) {
      console.error('加载消息失败:', error);
    } finally {
      loading.value = false;
      dataLoading.value = false;
    }
  };

  // 触底加载
  const onScroll = (e: Event) => {
    if (dataLoading.value) return;
    const el = e.target as HTMLElement;
    if (!el) return;
    const threshold = 80; // px
    const reachBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
    console.log(reachBottom, 'reachBottom===');

    if (!reachBottom) return;
    if (loading.value) return;
    if (activeTab.value === 'interactions' && !interactionHasMore.value) return;
    if (activeTab.value === 'official' && !officialHasMore.value) return;
    loadNotifications(false);
  };

  const notificationItem = ref<any>(null);
  const markAsRead = async (notification: any) => {
    if (activeTab.value === 'interactions') {
      // 互动消息点击直接标记为已读
      try {
        if (notification.msg_id) {
          await UserAPI.setMsgRead({ msg_id: notification.msg_id });
          console.log('互动消息已标记为已读:', notification.msg_id);

          // 根据类型跳转到详情页面
          if (notification.notification_type == 2 || notification.notification_type == 1) {
            router.push(`/detail?feed_id=${notification.feed?.feed_id}`);
            emit('close');
          }

          // 更新本地状态
          const interactionNotification = interactionNotifications.value.find(
            (n) => n.msg_id === notification.msg_id
          );
          if (interactionNotification) {
            interactionNotification.is_read = 1; // 1表示已读
          }
        }
      } catch (error) {
        console.error('标记互动消息已读失败:', error);
      }
    } else if (activeTab.value === 'official') {
      // 官方通知点击显示详情弹窗
      notificationItem.value = notification;
      showAnnouncement.value = true;
    }
  };

  const formatTime = (timeString: string) => {
    const time = new Date(timeString);
    const now = new Date();
    const diff = now.getTime() - time.getTime();

    const minutes = Math.floor(diff / (1000 * 60));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));

    if (minutes < 60) {
      return `${minutes}m ago`;
    } else if (hours < 24) {
      return `${hours}h ago`;
    } else {
      return `${days}d ago`;
    }
  };

  // 暴露未读数量给父组件
  defineExpose({
    unreadCount,
  });

  // 监听show prop变化
  watch(
    () => props.show,
    (newValue) => {
      if (newValue) {
        interactionNotifications.value = [];
        officialNotifications.value = [];
        interactionStart.value = 0;
        officialStart.value = 0;
        // 侧边栏显示时加载数据
        loadNotifications();
      }
    },
    { immediate: true }
  );

  // 查看用户
  const viewUser = (user: any) => {
    router.push({ path: '/profile', query: { uid: user?.uid } });
    emit('close');
  };

  // 生命周期
  onMounted(() => {
    if (props.show) {
      interactionNotifications.value = [];
      officialNotifications.value = [];
      interactionStart.value = 0;
      officialStart.value = 0;
      loadNotifications();
    }
  });
</script>

<style scoped lang="scss">
  // 消息侧边栏样式
  .notification-sidebar {
    position: fixed;
    top: 0;
    left: 184px; // 紧贴左侧导航栏
    width: 560px;
    height: 100vh;
    background: white;
    border-right: 1px solid #e5e7eb;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    padding: 24px 16px;
  }

  .tab-container {
    margin-top: 44px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    padding: 0 8px;
  }

  .tab-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 12px;
    cursor: pointer;
    color: #7a7a7a;
    font-weight: 500;
    position: relative;
    .tab-count {
      position: absolute;
      top: -10px;
      right: -16px;
      font-size: 12px;
      font-weight: 400;
      border-radius: 26px;
      background: var(---, #ff4d4f);
      padding: 1px 4px;
      min-width: 20px;
      text-align: center;
      color: #fff;
    }

    &.active {
      border-bottom: 2px solid #f76b1b;
      color: #222;
    }

    &:hover:not(.active) {
      color: #222;
    }
  }

  .tab-count {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
  }

  .sidebar-title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 0 8px;
  }

  .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #7a7a7a;
    transition: all 0.2s ease;

    &:hover {
      background: #f0f0f0;
      color: #222;
    }
  }

  .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding-top: 8px;
    padding-bottom: 32px;
  }

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #7a7a7a;
    gap: 12px;
  }

  .loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e1e2e3;
    border-top: 2px solid #f76b1b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: #7a7a7a;
    gap: 16px;
  }

  .empty-icon {
    font-size: 48px;
    opacity: 0.5;
  }

  .notification-list {
    display: flex;
    flex-direction: column;
  }

  // Interactions样式
  .box-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;

    &:hover {
      background: #f8f9fa;
    }
  }

  .official-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;

    &.type-system {
      background: #e6f7ff;
      color: #1890ff;
    }

    &.type-announcement {
      background: #fff7e6;
      color: #fa8c16;
    }

    &.type-update {
      background: #f6ffed;
      color: #52c41a;
    }

    &.type-security {
      background: #fff1f0;
      color: #ff4d4f;
    }

    &.type-promotion {
      background: #f9f0ff;
      color: #722ed1;
    }
  }

  .notification-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
  }

  .priority-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;

    &.priority-high {
      background: #ff4d4f;
      color: white;
    }
  }

  .notification-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .notification-content {
    flex: 1;
    min-width: 0;
  }

  .notification-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
  }

  .notification-time {
    font-size: 12px;
    color: #7a7a7a;
  }

  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
